<template>
	<view class="container">
		<view class="page-title">手机号注册</view>
		<view class="form-content">
			<u-input v-model.trim="form.mobile" clearable placeholder="请输入登录手机号" shape="circle" border="none" fontSize="32rpx"
				:customStyle="{background:'#F4F4F4',padding:'14rpx 30rpx'}">
				<template slot="suffix">
					<view class="code-text" :class="[form.mobile.trim()?'hasTime':'']" @tap="getPhoneCode">
						{{countdownTime>0?countdownTime+'S':'获取验证码'}}
					</view>
				</template>
			</u-input>

			<u--input v-model.trim="form.code" clearable type="number" placeholder="短信验证码" shape="circle" border="none"
				fontSize="32rpx" :customStyle="{background:'#F4F4F4',padding:'14rpx 30rpx',marginTop:'26rpx'}"></u--input>

			<template v-if="inputPasswordType">
				<u-input v-model.trim="form.password" clearable type="password" maxlength="20" placeholder="请输入登录密码"
					shape="circle" border="none" fontSize="32rpx"
					:customStyle="{background:'#F4F4F4',padding:'14rpx 30rpx',marginTop:'26rpx'}">
					<template slot="suffix">
						<view @click="changeInputType">
							<image src="/static/login/icon-eye-close.png" class="icon-eye"></image>
						</view>
					</template>
				</u-input>
			</template>
			<template v-else>
				<u-input v-model.trim="form.password" clearable type="text" maxlength="20" placeholder="请输入登录密码" shape="circle"
					border="none" fontSize="32rpx" :customStyle="{background:'#F4F4F4',padding:'14rpx 30rpx',marginTop:'26rpx'}">
					<template slot="suffix">
						<view @click="changeInputType">
							<image src="/static/login/icon-eye-open.png" class="icon-eye"></image>
						</view>
					</template>
				</u-input>
			</template>


			<view class="agreement-text">密码为6-20位，可由数字、字母、符号组成。</view>

			<u-button shape="circle" color="#FFC046" :customStyle="customButtonStyle"
				:disabled="!(form.mobile&&form.code&&form.password)" @click="btnRegisterUser">立即注册</u-button>

			<view class="register-text text-right" @click="goLoginPage">已有账号使用密码登录</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputPasswordType: true,
				form: {
					mobile: '',
					password: '',
					code: '',
				},
				// 倒计时秒数
				countdownTime: 0,
				intervalId: null,
				customButtonStyle: {
					width: '100%',
					height: '76rpx',
					fontSize: '32rpx',
					color: '#FFFFFF',
					marginTop: '36rpx',
				}
			}
		},
		methods: {
			//切换密码输入框类型
			changeInputType() {
				this.inputPasswordType = !this.inputPasswordType
			},

			// 获取短信验证码
			getPhoneCode() {
				if (!this.form.mobile.trim()) {
					return
				}
				// 检查是否60秒内已经请求过
				if (this.countdownTime > 0) {
					return;
				}
				if (!this.$util.businessUtil.checkPhoneBool(this.form.mobile)) {
					return
				}
				this.$api.gate_sms_send({
					mobile: this.form.mobile,
					event: 'register'
				}).then(res => {
					// 发送验证码
					uni.showToast({
						title: "验证码已发送",
						icon: "none",
						duration: 2000
					})
					// 倒计时60秒
					this.countdownTime = 60
					this.intervalId = setInterval(() => {
						if (this.countdownTime <= 0) {
							clearInterval(this.intervalId)
						}
						this.countdownTime -= 1;
					}, 1000)
				})
			},

			//立即注册
			btnRegisterUser() {
				if (!this.$util.businessUtil.checkPhoneBool(this.form.mobile)) {
					return
				}
				this.$api.gate_user_register(this.form).then(res => {
					if (res) {
						this.$showToast('注册成功')
						this.$store.dispatch('handle_login_after_thing', res.userinfo)
						uni.showLoading()
						setTimeout(() => {
							uni.hideLoading()
							uni.switchTab({
								url: '/pages/home/index'
							})
						}, 1000)

					}
				})
			},

			//跳转登录页面
			goLoginPage() {
				uni.redirectTo({
					url: '/pages/login/login'
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #ffffff;
	}
</style>
<style lang="scss" scoped>
	@import "./index.scss"
</style>